<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>
        $(function () {
            $("#header").load("static/header.html");
            showUserManager();
        });

        // 显示用户管理
        function showUserManager() {
            var table = layui.table;
            table.render({
                elem: '#userTable'
                , url: 'admin/account/getList' //数据接口
                , page: true //开启分页
                , request: {
                    pageName: 'pageNum'
                    , limitName: 'limit'
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,
                        "message": res.message, //解析返回信息提示
                        "total": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                , cols: [[ //表头
                    {type: "checkbox", fixed: 'left'}
                    , {field: 'account', title: '账号', sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名'}
                    , {field: 'phone', title: '手机号', sort: true}
                    , {field: 'email', title: '邮箱'}
                    , {field: 'disable', title: '状态', templet: "#adminEnableTemplet", sort: true}
                    , {field: 'createTime', title: '创建时间'}
                    , {field: "操作", fixed: 'right', title: "操作", width: 150, align: 'center', toolbar: '#adminRowBar'}
                ]]
                , toolbar: "#systemManagerDemo"
                // ,defaultToolbar: [] //取消默认工具条的三个功能、筛选、导出、打印
            });
        }

        // 重置管理员账号密码
        function resetPassword(id) {
            layer.confirm("确定要重置密码吗？", {btn: ['确定', '取消'], title: "确认操作"}, function () {
                $.post({
                    url: "admin/password/reset"
                    , data: {
                        adminId: id
                    }
                    , success: function (result) {
                        if (result && result.success) {
                            layer.msg("重置密码成功，账号就是密码");
                        } else {
                            layer.msg(result.message);
                        }
                    }
                })
            })

        }

        // 修改管理员信息
        function changeAdmin(adminId) {
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '350px'], //宽高
                content: '../static/adminUpdate.html?adminId=' + adminId,
                end: function () {
                    $(".layui-laypage-btn").click()
                }
            })
        }

        // 新增管理员按钮
        function showAddAdmin() {
            layer.open({
                type: 2,
                title: "创建管理员账号",
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '500px'], //宽高
                content: '../static/adminAdd.html',
                end: function () {
                    $(".layui-laypage-btn").click()
                }
            })
        }

        // 显示角色管理
        function showRoleManager() {
            var table = layui.table;
            table.render({
                elem: '#roleTable'
                , url: 'admin/role/getList' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'name', title: '角色名', sort: true, fixed: 'left'}
                    , {field: 'comment', title: '备注'}
                    , {field: 'createTime', title: '创建时间'}
                    , {field: 'modifiedTime', title: '修改时间'}
                    , {field: '操作', title: '操作', toolbar: "#roleRowBar"}
                ]]
                , request: {
                    pageName: 'pageNum'
                    , limitName: 'limit'
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,
                        "message": res.message, //解析返回信息提示
                        "total": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , toolbar: "#roleBar"
            });
            table.render();
        }

        // 新增角色
        function showAddRole() {
            layer.open({
                type: 2,
                title: "创建角色",
                skin: 'layui-layer-rim', //加上边框
                // area: ['600px', '300px'], //宽高
                content: '../static/adminRole.html',
                end: function () {
                    $(".layui-laypage-btn").click();
                }
            })
        }

        // 删除角色
        function deleteRole(roleId) {
            layer.confirm("你确定要删除么？", {btn: ['确定', '取消'], title: "删除确认"}, function (index) {
                // layer.msg("hello world");
                $.post({
                    url: "admin/role/delete"
                    , data: {roleId: roleId}
                    , success: function (result) {
                        if (result && result.success) {
                            layer.close(index);
                            $(".layui-laypage-btn").click();
                        } else {
                            layer.msg(result.message);
                        }
                    }
                });
            });
        }

        // 显示资源管理
        function showResource() {
            // layer.msg("hello");
            var table = layui.table;
            table.render({
                elem: '#resourceTable'
                , url: 'admin/permission/getList' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: '资源id', sort: true, fixed: 'left'}
                    , {field: 'name', title: '资源名称', sort: true}
                    , {field: 'method', title: '请求方式', sort: true}
                    , {field: 'path', title: '请求路径', sort: true}
                    , {
                        field: 'authorityType', title: '资源类型', templet: function (d) {
                            if (d.authorityType == 0) {
                                return '<a class="layui-btn layui-btn layui-btn-xs" lay-event="authorize">无需登录</a>';
                            } else if (d.authorityType == 1) {
                                return '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="authorize">需要登录</a>';
                            } else if (d.authorityType == 2) {
                                return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="authorize">需要鉴权</a>';
                            }
                        }, sort: true
                    }
                    , {field: 'createTime', title: '创建时间', sort: true}
                    , {field: 'modifiedTime', title: '修改时间', sort: true}
                ]]
                , request: {
                    pageName: 'pageNum'
                    , limitName: 'limit'
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,
                        "message": res.message, //解析返回信息提示
                        "total": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
            });
        }

        // 显示登陆日志
        function showLoginLog() {
            var table = layui.table;
            table.render({
                elem: '#logTable'
                , url: 'admin/log/loginAndLogout/getList' //数据接口
                , page: true //开启分页
                , request: {
                    pageName: 'pageNum'
                    , limitName: 'limit'
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,
                        "message": res.message, //解析返回信息提示
                        "total": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , cols: [[ //表头
                    {field: 'username', title: '用户名', sort: true}
                    , {field: 'roleName', title: '角色名', sort: true}
                    , {field: 'ip', title: 'ip地址', sort: true}
                    , {field: 'comment', title: '备注'}
                    , {field: 'createTime', title: '时间', sort: true}
                ]]
            });
        }
    </script>

    <script type="text/html" id="roleRowBar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="deleteRole({{d.id}})">删除</a>
    </script>

    <script id="roleBar" type="text/html">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="showAddRole()">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </script>

    <script type="text/html" id="adminRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit" onclick="changeAdmin({{d.id}})">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reset" onclick="resetPassword({{d.id}})">重置密码</a>
    </script>

    <script type="text/html" id="adminEnableTemplet">
        <input type="checkbox" name="disable" value="{{d.disable}}" lay-event="switch" lay-skin="switch"
               lay-text="正常|禁用" lay-filter="disable" {{ d.disable== 0 ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="systemManagerDemo">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="showAddAdmin()">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
        <!--<button type="button" class="layui-btn layui-btn-danger layui-btn-sm">-->
        <!--<i class="layui-icon layui-icon-delete"></i>删除-->
        <!--</button>-->
    </script>

</head>
<body>
<!--头部-->
<div id="header"></div>
<div style="height: 50px"></div>
<div id="main">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this" onclick="showUserManager()">用户管理</li>
            <li onclick="showRoleManager()">角色管理</li>
            <li onclick="showResource()">资源管理</li>
            <li onclick="showLoginLog()">登录日志</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div>
                    <!--用户表格-->
                    <table id="userTable" lay-filter="test"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                <div>
                    <table id="roleTable" lay-filter="test"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                <table id="resourceTable" lay-filter="test"></table>
            </div>
            <div class="layui-tab-item">
                <table id="logTable" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>
</html>